Add new input lines to HTML entry form

Enable users to add a row of fields to an HTML input form. In this code, after the HTML loads, addForm() is called. Clicking the Add Line button calls a function, addLine(), which calls addField() once for each field in the new input line. The elements, label and input, are formatted using CSS.

Add Line

Generate array of objects

Loop through HTML form lines and store the data into an array of objects

Generate and Display Array of Objects

Generate a table containing data from array of objects

Generate and Display Table

Local Name	Local DOB	Local Age	Local Zodiac

Things jQuery does differently than JavaScript

1. jQuery can reference elements easier with a stamement such as $( "#myId" ), where as vanilla JavaScript has to use something like document.getElementById("myId").
2. jQuery has built in methods for animations and effects like fading in and out with .fadeIn () and .fadeOut(). Vanilla JavaScript would require much more code to achieve such an effect.
3. jQuery can access css code from elements much easier by simply calling .css("cssProperty") such as $("#myID").css( "background-color" ). Vanilla JavaScript would require something more along the lines of:
   var elem = document.getElementById("test");
   var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
4. jQuery can manipulate the DOM much easier with its built in functions such as .replaceWith() that vanilla JavaScript does not have.
5. jQuery can access events associated with HTML script by something as simple as $("#myId").click(someFunction). Vanilla JavaScript requires a little more code with: document.getElementById("myId").addEventListener("click", someFunction).